TicTacToe đơn giản trong JavaScript với mã nguồn
5.435 lượt xem;
1 /**********************************************
2 *** GENERAL
3 **********************************************/
4
5 * {
6 margin: 0;
7 padding: 0;
8 box-sizing: border-box;
9 }
10 html{
11 min-height: 100vh;
12 }
13
14 body {
15 background-image: linear-gradient(rgba(62, 20, 20, 0.4), rgba(62, 20, 20, 0.4)), url(../Images/background.jpg);
16 background-size: cover;
17 background-position: center;
18 font-family: serif;
19 font-weight: 300;
20 position: relative;
21 height: 100vh;
22 color: #555;
23 }
24
25 .container h1 {
26 text-align: center;
27 margin-bottom: 50px;
28 position: absolute;
29 font-size: 30px;
30 font-weight: bold;
31 }
32
33
34 .container {
35 width: 990px;
36 text-align: center;
37 height: 650px;
38 margin: auto;
39 margin-top: 50px;
40 background-color: antiquewhite;
41 opacity: 0.9;
42 }
43
44 tr{
45 height:120px;
46 }
47
48 th {
49 width: 330px;
50 font-size: 40px;
51 text-align: center;
52 font-family: serif;
53 text-transform: uppercase;
54 letter-spacing: 2px;
55 font-weight: 100;
56 margin-top: 20px;
57 margin-bottom: 10px;
58 position: relative;
59 padding-top:20px;
60 }
61 td{
62 width:300px;
63 text-align:center;
64 padding-bottom:20px;
65 }
66
67 button {
68 width: 200px;
69 color: #555;
70 background: none;
71 border: none;
72 font-family: sans-serif;
73 font-size: 20px;
74 text-transform: uppercase;
75 cursor: pointer;
76 font-weight: 300;
77 transition: background-color 0.3s, color 0.3s;
78 }
79
80 button:hover {
81 font-weight: 600;
82 }
83
84 button:hover i {
85 margin-right: 20px;
86 }
87
88 button:focus {
89 outline: none;
90 }
91
92 .score {
93 text-align: center;
94 font-size: 80px;
95 color:forestgreen;
96 }
97
98 .turnTotal {
99 background-color:orange;
100 color: #fff;
101 width: 60%;
102 margin: 0 auto;
103 padding: 12px;
104 text-align: center;
105 }
106
107 .turnTotal-label {
108 text-transform: uppercase;
109 font-weight:bold;
110 margin-bottom: 10px;
111 font-size: 20px;
112 font-family:serif;
113 color: red;
114 }
115
116 .turnTotal-score {
117 font-size: 40px;
118 }
119 .menu {
120 background-color:khaki;
121 height:80px;
122 padding-top: 40px;
123 }
124
125
126 .containerTTC {
127 height: 650px;
128 width: 650px;
129 margin: auto;
130 margin-top: 100px;
131 text-align: center;
132 background-color: khaki;
133 }
134
135
136 #C0, #C1, #C2, #C3, #C4, #C5{
137 border-bottom: 5px solid black;
138 }
139
140 #C0, #C1, #C3, #C4, #C6, #C7 {
141 border-right: 5px solid black;
142 }
143
144 .divTable {
145 height: 320px;
146 width: 320px;
147 margin: auto;
148 padding-top:30px
149 }
150
151
152 .option {
153 color: black;
154 font-size: 30px;
155 text-align: center;
156 font-family: serif;
157 letter-spacing: 2px;
158 font-weight: bold;
159 margin-top: 10px;
160 margin-bottom: 5px;
161 position: relative;
162 padding-top: 20px;
163 }
2 *** GENERAL
3 **********************************************/
4
5 * {
6 margin: 0;
7 padding: 0;
8 box-sizing: border-box;
9 }
10 html{
11 min-height: 100vh;
12 }
13
14 body {
15 background-image: linear-gradient(rgba(62, 20, 20, 0.4), rgba(62, 20, 20, 0.4)), url(../Images/background.jpg);
16 background-size: cover;
17 background-position: center;
18 font-family: serif;
19 font-weight: 300;
20 position: relative;
21 height: 100vh;
22 color: #555;
23 }
24
25 .container h1 {
26 text-align: center;
27 margin-bottom: 50px;
28 position: absolute;
29 font-size: 30px;
30 font-weight: bold;
31 }
32
33
34 .container {
35 width: 990px;
36 text-align: center;
37 height: 650px;
38 margin: auto;
39 margin-top: 50px;
40 background-color: antiquewhite;
41 opacity: 0.9;
42 }
43
44 tr{
45 height:120px;
46 }
47
48 th {
49 width: 330px;
50 font-size: 40px;
51 text-align: center;
52 font-family: serif;
53 text-transform: uppercase;
54 letter-spacing: 2px;
55 font-weight: 100;
56 margin-top: 20px;
57 margin-bottom: 10px;
58 position: relative;
59 padding-top:20px;
60 }
61 td{
62 width:300px;
63 text-align:center;
64 padding-bottom:20px;
65 }
66
67 button {
68 width: 200px;
69 color: #555;
70 background: none;
71 border: none;
72 font-family: sans-serif;
73 font-size: 20px;
74 text-transform: uppercase;
75 cursor: pointer;
76 font-weight: 300;
77 transition: background-color 0.3s, color 0.3s;
78 }
79
80 button:hover {
81 font-weight: 600;
82 }
83
84 button:hover i {
85 margin-right: 20px;
86 }
87
88 button:focus {
89 outline: none;
90 }
91
92 .score {
93 text-align: center;
94 font-size: 80px;
95 color:forestgreen;
96 }
97
98 .turnTotal {
99 background-color:orange;
100 color: #fff;
101 width: 60%;
102 margin: 0 auto;
103 padding: 12px;
104 text-align: center;
105 }
106
107 .turnTotal-label {
108 text-transform: uppercase;
109 font-weight:bold;
110 margin-bottom: 10px;
111 font-size: 20px;
112 font-family:serif;
113 color: red;
114 }
115
116 .turnTotal-score {
117 font-size: 40px;
118 }
119 .menu {
120 background-color:khaki;
121 height:80px;
122 padding-top: 40px;
123 }
124
125
126 .containerTTC {
127 height: 650px;
128 width: 650px;
129 margin: auto;
130 margin-top: 100px;
131 text-align: center;
132 background-color: khaki;
133 }
134
135
136 #C0, #C1, #C2, #C3, #C4, #C5{
137 border-bottom: 5px solid black;
138 }
139
140 #C0, #C1, #C3, #C4, #C6, #C7 {
141 border-right: 5px solid black;
142 }
143
144 .divTable {
145 height: 320px;
146 width: 320px;
147 margin: auto;
148 padding-top:30px
149 }
150
151
152 .option {
153 color: black;
154 font-size: 30px;
155 text-align: center;
156 font-family: serif;
157 letter-spacing: 2px;
158 font-weight: bold;
159 margin-top: 10px;
160 margin-bottom: 5px;
161 position: relative;
162 padding-top: 20px;
163 }